<template>
  <view class="doctor-container">
    <!-- 医院信息 -->
    <view class="hospital-info card">
      <image :src="hospital.logo" mode="aspectFit" class="logo" />
      <view class="info">
        <text class="name">{{ hospital.name }}</text>
        <text class="address">{{ hospital.address }}</text>
        <view class="tags">
          <text v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
        </view>
      </view>
    </view>

    <!-- 科室信息 -->
    <view class="department-info card">
      <view class="title-wrap">
        <image :src="department.icon" mode="aspectFit" class="icon" />
        <text class="title">{{ department.name }}</text>
      </view>
      <text class="desc">{{ department.description }}</text>
    </view>
    
    <!-- 医生列表 -->
    <view class="doctor-list">
      <view 
        class="doctor-item card"
        v-for="(doctor, index) in doctors"
        :key="index"
        @tap="selectDoctor(doctor)"
      >
        <view class="basic-info">
          <image :src="doctor.avatar" mode="aspectFill" class="avatar" />
          <view class="info">
            <view class="name-title">
              <text class="name">{{ doctor.name }}</text>
              <text class="title">{{ doctor.title }}</text>
            </view>
            <text class="hospital">{{ hospital.name }}</text>
            <text class="specialty">{{ doctor.specialty }}</text>
            <view class="tags">
              <text v-for="(tag, idx) in doctor.tags" :key="idx">{{ tag }}</text>
            </view>
          </view>
          <view class="rating">
            <text class="score">{{ doctor.rating }}</text>
            <text class="count">{{ doctor.ratingCount }}条评价</text>
          </view>
        </view>
        <view class="schedule-info">
          <view class="available-time">
            <text class="label">近期可约：</text>
            <view class="time-list">
              <view 
                class="time-item"
                v-for="(time, idx) in doctor.availableTimes"
                :key="idx"
              >
                <text class="date">{{ time.date }}</text>
                <text class="count">余{{ time.count }}个</text>
              </view>
            </view>
          </view>
          <view class="action">
            <view class="fee-info">
              <text class="label">挂号费</text>
              <text class="fee">¥{{ doctor.fee }}</text>
            </view>
            <button class="book-btn primary-btn">预约挂号</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 医院信息
const hospital = ref({
  id: 1,
  name: '澳门镜湖医院',
  logo: '/static/hospital/kiang-wu.jpg',
  address: '澳门连胜马路33号',
  tags: ['综合医院', '24小时急诊', '特需门诊'],
  rating: 4.8,
  distance: 2.5
})

// 科室信息
const department = ref({
  name: '心内科',
  icon: '/static/department/cardiology.png',
  description: '主要诊治心血管疾病，包括冠心病、高血压等'
})

// 医生列表
const doctors = ref([
  {
    id: 1,
    name: '张医生',
    title: '主任医师',
    avatar: '/static/doctor/doctor1.jpg',
    specialty: '擅长：冠心病、心律失常、高血压等心血管疾病的诊治',
    tags: ['专家门诊', '手术专家'],
    rating: 4.9,
    ratingCount: 2381,
    fee: 100,
    availableTimes: [
      { date: '今天', count: 5 },
      { date: '明天', count: 8 },
      { date: '后天', count: 12 }
    ]
  },
  // ... 其他医生数据
])

// 选择医生
const selectDoctor = (doctor) => {
  uni.navigateTo({
    url: `/pages/appointment/schedule?doctorId=${doctor.id}`
  })
}

// 获取科室ID并加载数据
onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const departmentId = page.$page?.options?.departmentId
  const hospitalId = page.$page?.options?.hospitalId
  
  // 加载数据
  loadHospitalInfo(hospitalId)
  loadDepartmentInfo(departmentId)
  loadDoctors(departmentId)
})

// 加载医院信息
const loadHospitalInfo = (hospitalId) => {
  // 这里应该是从API获取医院信息
  console.log('加载医院信息:', hospitalId)
}
</script>

<style lang="scss">
.doctor-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  
  .hospital-info {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    
    .logo {
      width: 100rpx;
      height: 100rpx;
      border-radius: $radius-md;
      margin-right: 20rpx;
    }
    
    .info {
      flex: 1;
      
      .name {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .address {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .tags {
        text {
          display: inline-block;
          font-size: 22rpx;
          color: $primary-color;
          background: $primary-light;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      }
    }
  }
  
  .department-info {
    margin-bottom: 20rpx;
    
    .title-wrap {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
    }
    
    .desc {
      font-size: 26rpx;
      color: $text-regular;
      line-height: 1.6;
    }
  }
  
  .doctor-list {
    .doctor-item {
      margin-bottom: 20rpx;
      
      .basic-info {
        display: flex;
        margin-bottom: 20rpx;
        
        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 60rpx;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name-title {
            margin-bottom: 8rpx;
            
            .name {
              font-size: 32rpx;
              color: $text-primary;
              font-weight: bold;
              margin-right: 16rpx;
            }
            
            .title {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
          
          .specialty {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 12rpx;
            display: block;
          }
          
          .tags {
            text {
              @extend .tag;
            }
          }
          
          .hospital {
            font-size: 26rpx;
            color: $primary-color;
            margin-bottom: 8rpx;
            display: block;
          }
        }
        
        .rating {
          text-align: right;
          
          .score {
            font-size: 36rpx;
            color: $primary-color;
            font-weight: bold;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .count {
            font-size: 22rpx;
            color: $text-secondary;
          }
        }
      }
      
      .schedule-info {
        padding-top: 20rpx;
        border-top: 1rpx solid #eee;
        
        .available-time {
          margin-bottom: 20rpx;
          
          .label {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 12rpx;
            display: block;
          }
          
          .time-list {
            display: flex;
            
            .time-item {
              margin-right: 30rpx;
              
              .date {
                font-size: 26rpx;
                color: $primary-color;
                margin-right: 8rpx;
              }
              
              .count {
                font-size: 24rpx;
                color: $text-secondary;
              }
            }
          }
        }
        
        .action {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .fee-info {
            .label {
              font-size: 26rpx;
              color: $text-regular;
              margin-right: 8rpx;
            }
            
            .fee {
              font-size: 32rpx;
              color: $danger;
              font-weight: bold;
            }
          }
          
          .book-btn {
            width: 160rpx;
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style> 